<template>
	<view class="homelife">
		<!-- 头部 -->
		<view class="homelife_head">
			<view v-for="(item,index) in headlist" :key="index" class="container_headbox" @click="Onchoois(item)">
				<text
					:class="initData.param.dynamic_type_id == item.id?'head_titlea':'head_titleb'">{{item.name}}</text>
				<view v-if="initData.param.dynamic_type_id == item.id"></view>
			</view>
		</view>
		<!-- 企业新闻 -->
		<view class="shuttle">
			<LoadMore ref="LoadMore" id="LoadMore" :diffHeight="124" :initData="initData" @dataRefresh='dataRefresh'
				v-if="LoadShow">
				<view class="Article_list" v-for="(item,index) in dataList" :key="index" @click="Onnewsinfo(item)">
					<view class="Article_top">
						<view class="shuttle_title">
							<view class="font-323232 font15 font-b">{{item.name}}</view>
							<text class="font13 font-969696">{{item.keyword}}</text>
						</view>
						<image mode="aspectFill" :src="http_img+item.img"></image>
					</view>
					<view class="Article_box"></view>
				</view>
			</LoadMore>
		</view>
	</view>
</template>

<script>
	import LoadMore from "@/components/loadMore.vue";
	export default {
		components: {
			LoadMore
		},
		data() {
			return {
				http_img: this.$store.state.http_img, //图片
				LoadShow: false,
				//传参数据
				initData: {
					url: 'dynamic', //接口
					//data里得传参
					param: {
						dynamic_type_id: null
					},
				},
				//头部列表
				headlist: [],
				//列表
				dataList: [],
			}
		},
		onLoad: function(options) {
			//获取头部
			this.Onhead()
		},
		methods: {
			//获取头部
			Onhead() {
				this.$Http({
					url: 'dynamicType',
					data: {}
				}).then(res => {
					this.headlist = res.data
					this.initData.param.dynamic_type_id = res.data[0].id
					this.LoadShow = true
				})
			},
			//返回数据
			dataRefresh(e) {
				this.dataList = e
			},
			//切换
			Onchoois(res) {
				this.initData.param.dynamic_type_id = res.id
				this.$refs.LoadMore.oncutRefresh(this.initData)
			},
			//详情页面
			Onnewsinfo(e) {
				uni.navigateTo({
					url: '/pagesA/info/newsinfo?type=dynamic&id='+e.id,
				})
			}
		}
	}
</script>

<style>
	/* 头部 */
	.homelife_head {
		height: 124rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.container_headbox {
		height: 50rpx;
	}

	.head_titlea {
		font-size: 30rpx;
		font-weight: 700;
		color: #323232;
	}

	.head_titleb {
		font-size: 30rpx;
		color: #969696;
	}

	.container_headbox view {
		height: 5rpx;
		background-color: #6bcbb6;
		border-radius: 3px;
		margin-top: 12rpx;
	}

	/* 列表 */
	.shuttle {
		padding: 0 25rpx;
	}

	.Article_list {
		width: 700rpx;
		/* margin: 0 25rpx; */
		margin-bottom: 34rpx;
	}

	.Article_top {
		width: 700rpx;
		display: flex;
		justify-content: space-between;
	}

	.Article_top image {
		width: 225rpx;
		height: 150rpx;
	}

	.shuttle_title {
		width: 420rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.shuttle_title view {
		width: 420rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		/*超出3行部分显示省略号，去掉该属性 显示全部*/
		-webkit-box-orient: vertical;
	}

	.Article_box {
		height: 30rpx;
		font-size: 26rpx;
		color: #969696;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1rpx #f5f5f5;
	}
</style>
